<template>
  <div class="admin">
    <header class="header">
        <h1 class="title">CMS酒店管理系统</h1>
        <div class="user">
            <p>
                <strong>欢迎您: </strong>
                {{$store.state.admin.user.username}}
            </p>
        </div>
    </header>
    <main class="main">
        <a-menu
            style="width: 256px"
            :defaultSelectedKeys="['/']"
            @click="handleMenu"
            mode="inline"
            theme="light">
            <template v-for="(menu, index) in $store.state.admin.menu" :key="index">
                <a-sub-menu v-if="menu.sub" :key="menu.url">
                    <template #title>
                        <span>{{menu.name}}</span>
                    </template>
                    <a-menu-item v-for="sub in menu.sub" :key="sub.url" >{{sub.name}}</a-menu-item>
                </a-sub-menu>
                <a-menu-item v-else :key="menu.url">
                    {{menu.name}}
                </a-menu-item>
            </template>
        </a-menu>
        <div class="content">
            <a-breadcrumb class="bread">
                <a-breadcrumb-item>Admin</a-breadcrumb-item>
                <a-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index">{{item}}</a-breadcrumb-item>
            </a-breadcrumb>
            <div class="main-content">
                <router-view></router-view> 
            </div>
        </div>
    </main>
    <footer class="footer">
        <p>&copy;CopyRight web site make chenSir. CMS酒店管理系统简版</p>        
    </footer>
  </div>
</template>

<script>
import { reactive, computed, onMounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { socketMessage } from "../utils/websocket"
export default {
    name: "layout",
    setup(){
        const state = reactive({
            selectedKeys: ['/']
        })
        const router = useRouter()
        const store = useStore();
        const handleMenu = (e) => {
            state.selectedKeys = e.keyPath.reverse();
            router.push({path: `/admin${state.selectedKeys.join("")}`})
        }
        const breadcrumb = computed(() => {
            let ans = [], path = state.selectedKeys;
            let menu = store.state.admin.menu;
            while(path.length){
                let url = path.shift();
                let index = menu.findIndex(item => item.url === url);
                ans.push(menu[index].name);
                menu = menu[index]?.sub;
            }
            return ans;
        })

        onMounted(() => {
            socketMessage()
        })

        return {
            state,
            handleMenu,
            breadcrumb
        }
    }
}

</script>

<style lang="scss">
@import "../assets/styles/pages/layout.scss";
</style>